<template>
  <div class="wrap" id="abc">
    <HeadBar
      title="我的收藏"
      :isShowLeftIcon="true"
      @isShowComponent="hideSC"
    ></HeadBar>
    <div style="height: 50px"></div>
    <!-- 收藏内容 -->
    <div class="con">
      <div
        class="con-item"
        v-for="obj in datalist"
        :key="obj.id"
        @click="detailPageHandler(obj.value_id)"
      >
        <div class="left">
          <img :src="obj.list_pic_url" alt="" />
        </div>
        <div class="right">
          <p class="p-name">{{ obj.name }}</p>
          <p class="p-brief">{{ obj.goods_brief }}</p>
          <p class="price">${{ obj.retail_price }}</p>
        </div>
      </div>
    </div>

    <!-- 详情展示 -->
    <DescCOM class="dcom" :ItemId="goodsId" v-if="isShowCom"></DescCOM>
  </div>
</template>

<script>
import HeadBar from "@/components/HeadBar";
import { mycollectlist } from "@/api/shoucang.js";
import DescCOM from "@/views/home/components/Desc.vue";
export default {
  name: "shoucang",
  data() {
    return {
      parentId: 1,
      dataInfo: {},
      datalist: [],
      goodsId: null,
      isShowCom: false,
    };
  },
  components: {
    HeadBar,
    DescCOM,
  },
  created() {
    this.mycollectlistHandler();
  },
  methods: {
    hideSC($event) {
      this.$emit("hideshoucang", $event);
    },
    async mycollectlistHandler() {
      try {
        const res = await mycollectlist({
          typeId: 0,
        });
        this.dataInfo = res.data.data;
        this.datalist = res.data.data.data;
        console.log(res.data.data);
      } catch (err) {
        console.log(err.message);
      }
    },
    detailPageHandler(id) {
      this.goodsId = id;
      console.log(id);
      this.isShowCom = true;
    },
  },
};
</script>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  //   height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

.con-item {
  display: flex;
  .left {
    flex: 4;
    box-sizing: border-box;

    img {
      width: 100%;
    }
  }
  .right {
    box-sizing: border-box;
    flex: 6;
    font-size: 24px;
    color: #444;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .p-name {
      font-size: 40px;
      line-height: 60px;
    }
    .p-brief {
      font-size: 30px;
      line-height: 40px;
    }
    .price {
      font-size: 24px;
      color: #c00000;
      line-height: 30px;
    }
  }
}

.dcom {
  position: absolute;
  width: 100vw;
  height: auto;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #fff;
}
</style>
